import React, { Component } from 'react'
import { NavLink, Route } from 'react-router-dom'
import Details from './Details'


export default class Message extends Component {

    state = {
        messages: [
            { id: '01', title: 'message001' },
            { id: '02', title: 'message002' },
            { id: '03', title: 'message003' }
        ]
    }

    render() {
        const { messages } = this.state;

        return (
            <div>
                <div>
                    <ul>
                        {
                            messages.map((messageObj) => {
                                return (<li key={messageObj.id}>
                                            <NavLink to={`/home/messages/details/${messageObj.id}/${messageObj.title}`}>{messageObj.title}</NavLink>
                                        </li>)
                            })
                        }
                    </ul>
                </div>
                <hr />
                <Route path={'/home/messages/details/:id/:title'} component={Details}/>
            </div>
        )
    }
}
